<template>
	<view>
		<view class="box1">
			<view class="data1">
				<view class="img1" @click="show = true">
					<image src="/static/images2/Calendar.png" style="width: 100%;height: 100%;">

					</image>
				</view>
				<view class="text1">
					放号时间: 早07:00 预约周期29天
				</view>
			</view>

			<scroll-view class="scroll-view_H" scroll-x="true" :scroll-into-view="item">

				<view :id="'item' + index " @click="handoffAppointment(item,index)"
					class="scroll-view-item_H uni-bg-red" v-for="(item,index) in timeData"
					:style="{border: axtiveIndex === index ? '2rpx solid #159DFF' : ''}">

					<view class="list-box">
						<view class="image">{{getWeek(item)}}</view>
						<view class="text" style="font-size: 28rpx;">{{getMonDay(item)}}</view>
					
					</view>
				</view>

			</scroll-view>

			<!-- <scroll-view class="scroll-view_H" :scroll-into-view="item"  scroll-x="true" @scroll="scroll" scroll-left="120">
			<view class="box">
				<view class="xh" :id="'item'+ index" v-for="(item,index) in timeData" :key="index"
					@click="handoffAppointment(item,index)"> 
					<view class="list-box"  :style="{border: axtiveIndex === index ? '2rpx solid #159DFF' : ''}">
						<view class="image">{{getWeek(item)}}</view>
						<view class="text" style="font-size: 28rpx;">{{getMonDay(item)}}</view>
						<text class="text" style="color: #159DFF;">{{item.isReducible ? '无号' : '有号'}}</text>
					</view>
				</view>
			</view>
			</scroll-view> --> 
		</view>
		<view class="Cdata">
			
		</view>
		<!-- 预约时间 -->
		<view class="appoitnData" style="padding-top: 30rpx;">
			<view style="display: flex; height: 60rpx; margin-left: 35rpx; ">
				<view class="Cimg1" style=" display: flex; align-items: center; height: 60rpx;">
					<image src="/static/images2/Frame.png" style="width: 100%;height: 35rpx;">
					</image>
				</view>
				<text   style="display: flex; align-items: center; margin-left: 10rpx; ">可预约时间</text>
				
			</view>

			
			<!-- <view class="afterAppoint">上午预约</view> -->
			<view class="afterApp">上午预约</view>
			<view class="flex1" style="display: flex;  justify-content: center;align-items: center;"
				v-for="(item,index) in moment" :index="key" v-if="item.periodName =='上午'">
				<view class="leftApp" :style="{background: activeIndex ==index ? '#159DFF' : ''}">
					<text style="height: 40rpx;
				
                    font-weight: 500;font-size: 30rpx;color: #333333;">{{item.startTime}} - {{item.endTime}}</text>
				</view>
			
				<view @click="chooseCode(item,index)" class="rightApp" :style="{background: handoffAppointment2(item) == true ? '#F4FAFF' :'#d3d3d3'}">
					<text style="width: 110rpx; text-align: center; height: 40rpx;font-family: MiSans, MiSans;font-weight: 500;
                    font-size: 30rpx;color: #159DFF;">选择<!-- :{{item.availableSlots}} --></text>
				</view>
			</view>
			<view class="afterApp">下午预约</view>
			<view class="flex1" style="display: flex; justify-content: center;align-items: center;"
				v-for="(item,index) in moment" :index="key" v-if="item.periodName =='下午'">
				<view class="leftApp" :style="{background: activeIndex ==index ? '#159DFF' : ''}">
					<text style="height: 40rpx;
		        font-weight: 500;font-size: 30rpx;color: #333333;">{{item.startTime}} - {{item.endTime}}</text>
				</view>
				<view @click="chooseCode(item,index)" :style="{background: handoffAppointment2(item) == true ?'#F4FAFF' :'#d3d3d3'}" class="rightApp">
					 
					<text style="width: 110rpx; text-align: center; height: 40rpx;font-family: MiSans, MiSans;font-weight: 500;
		        font-size: 30rpx;color: #159DFF;">选择<!-- {{item.availableSlots}} --></text>
				</view>
			</view>
		</view>
		<view>
			<u-calendar :show="show"  :maxDate="maxData"   @confirm="confirm" @close="close"></u-calendar>
			<!-- <u-calendar :show="show" @close="close" @confirm="confirm" :start-date="'2025-5-27'"
   	:end-date="'2025-5-2'" ></u-calendar> -->
		</view>
	</view>
</template>
<script>
	import mine from "@/api/mine"
	export default {
		data() {
			return {
				timeData: [],
				moment: [],
				timeList: [],
				axtiveIndex: 0,
				activeIndex: 0,
				timeList2: [],
				item: "",
				index2: "",
				show: false,
				data: null,
				luck:true,
				maxData:""
			}
		},
		onReady() {
		},
	     onLoad(opt) {
			if (opt.index != 'null') {
				let index = Number(opt.index)
				this.activeIndex = index
				setTimeout(() => {
					this.item = 'item' + opt.secondParam
					
					
					this.axtiveIndex = Number(opt.secondParam)
					this.moment = this.timeData[this.axtiveIndex].timeVoList
					this.moment = this.timeData[0].timeVoList
					this.moment.forEach((Item, index) => {
						Item['year'] = this.timeData[0].date
						//当前时间戳
						const nowTimestamp = new Date().getTime()
						//数据时间戳
						const dataTimestamp = new Date(Item.year + ' ' + Item.endTime).getTime()
						if (nowTimestamp <= dataTimestamp) {
							//代表还可以预约
							Item['isOver'] = true
							//console.log(true)
						} else {
							Item['isOver'] = false
							//console.log(false)
						}
					
					})
				}, 500)
				console.log(opt, "选项")
			}else{
				
				//拿到预约周期
				
				  const data =  JSON.parse(decodeURIComponent(opt.order));
				
				  const res2 = JSON.parse(uni.getStorageSync('date'))
				 res2.rows.forEach((item,index)=>{
				 	 if(data.date == item.date){
				 		
						  setTimeout(() => {
							  this.item = "item" + index
							  this.axtiveIndex = index //控制边框
							  this.moment = this.timeData[this.axtiveIndex].timeVoList
						  },500)
				 		item.timeVoList.forEach((item,index)=>{
							  if(item.startTime+item.endTime == data.startTime + data.endTime)
							  {
								   this.activeIndex = index //控制高亮
							
							  }
						})
				 	 }
				 })
			}

		},

		methods: {
			confirm(e) {
				this.show = false
				console.log("选择的日期格式", e)
				let isSee = false
				this.timeData.forEach((item, index) => {
					if (item.date == e[0]) {
					
						this.item = "item" + index
						this.axtiveIndex = index
						this.moment = this.timeData[this.axtiveIndex].timeVoList
						this.data = item
						isSee = true
						return
					}
				})
				if (!isSee) return this.$u.toast("超出日期范围请重新选择")
			},
			close() {
				this.show = false
			}, 
			chooseCode(item, index) {
				
				  if(!this.handoffAppointment2(item)) return this.$u.toast("该时间段不可预约!")
				if(this.luck)
				{
					 this.luck = false
					 this.activeIndex = index
					
					 item.year = this.timeData[this.axtiveIndex].date		    
					 				//if(!item.isOver || !item.availableSlots) return this.$u.toast("超出时间范围或已无余号")
					 
					 				//item = this.timeData[this.axtiveIndex].timeVoList[this.activeIndex]
					 		
					 				//item.year = this.timeData[this.axtiveIndex ].data
					 				if (this.data != null) {
					 					item.year = this.data.date
					 					console.log(this.data, item)
					 				}
									console.log(this.axtiveIndex,"索引")
					 				item['index'] = index
					 				item['index2'] = this.axtiveIndex
					 
					 				//携带参数并且跳转出去
					 				
					 setTimeout(()=>{ 
					 				   uni.$emit('updateData', item)
									    this.luck = true
					 				   uni.navigateBack({
					 				   	delta: 1
					 				   })
					 },500)	
				}
				
				
				
			
			},

			getWeek(item) {
				return this.getDayOfWeek(item.date)
			},
			getMonDay(item) {
				return this.formatDate(item.date)
			},
			getDayOfWeek(dateString) {
				// 将输入的字符串解析为 [year, month, day] 格式
				const [year, month, day] = dateString.split('-').map(Number);

				if (isNaN(year) || isNaN(month) || isNaN(day)) {
					throw new Error('Invalid date format. Please provide a valid YYYY-MM-DD string.');
				}
				const date = new Date(year, month - 1, day);
				const daysOfWeek = ['周天', '周一', '周二', '周三', '周四', '周五', '周六'];
				return daysOfWeek[date.getDay()];
			},

		  getOpenTime() {
				const res =  JSON.parse(uni.getStorageSync('date'))
				this.maxData = res.rows[res.rows.length-1].date
				console.log("开放日时间列表", res)
				this.timeData = res.rows
			},
          handoffAppointment2(item){
			  console.log(item,"2")
			   const nowTimestamp = new Date().getTime()
			   //数据时间戳
			   const dataTimestamp = new Date(this.timeData[this.axtiveIndex].date + ' ' + item.endTime).getTime()
			   
			   if (nowTimestamp <= dataTimestamp) {
			   	//代表还可以预约
				console.log("可以预约")
			     return true
			   	//console.log(true)
			   } else {
			   	  return false
			   	//console.log(false)
			   }
		  },
			handoffAppointment(item, index) {
				this.data = null
				this.axtiveIndex = index
				this.moment = item.timeVoList
				this.moment.forEach((Item, index) => {
					Item['year'] = item.date
					//判读数据时间是否小于当天时间如果是加上一个isOver

					const nowTimestamp = new Date().getTime()
					//数据时间戳
					const dataTimestamp = new Date(Item.year + ' ' + Item.endTime).getTime()

					if (nowTimestamp <= dataTimestamp) {
						//代表还可以预约
						Item['isOver'] = true
						//console.log(true)
					} else {
						Item['isOver'] = false
						//console.log(false)
					}
				})
				console.log(this.moment, "时刻")
			},
			formatDate(inputDate) {
				// 检查输入是否为有效日期字符串
				if (!inputDate || typeof inputDate !== 'string') {
					throw new Error('请输入有效的日期字符串，格式为 "YYYY-MM-DD"');
				}

				// 按照 "-" 分割日期字符串
				const parts = inputDate.split('-');

				// 确保分割后长度为 3（年、月、日）
				if (parts.length !== 3) {
					throw new Error('日期格式无效，请使用 "YYYY-MM-DD" 格式');
				}

				// 提取月份和日期部分
				const month = parts[1]; // 月份
				const day = parts[2]; // 日期

				// 返回格式化的结果
				return `${month}/${day}`;
			}
		},
	    mounted() {
			// let time = this.getDayOfWeek("2025-5-23")
			//	console.log(time, "星期")
			//获取开放日预约时间
			 this.getOpenTime()
			//  this.item = 'item10'
			this.moment = this.timeData[0].timeVoList
			this.moment.forEach((Item, index) => {
				Item['year'] = this.timeData[0].date
				//当前时间戳
				const nowTimestamp = new Date().getTime()
				//数据时间戳
				const dataTimestamp = new Date(Item.year + ' ' + Item.endTime).getTime()
				if (nowTimestamp <= dataTimestamp) {
					//代表还可以预约
					Item['isOver'] = true
					//console.log(true)
				} else {
					Item['isOver'] = false
					//console.log(false)
				}

			})
		
		}
	}
</script>

<style lang="scss">
	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 686rpx;
	    box-sizing: border-box;
		padding: 0 20rpx;
	}

	.scroll-view-item {
		height: 300rpx;
		width: 20rpx !important;
		margin: 0 !important;
		line-height: 300rpx;

		font-size: 36rpx;
	}

	.scroll-view-item_H {
	display: inline-block;
	width: 160rpx;
	height: 200rpx;
	border-radius: 20rpx;
	padding-top: 60rpx;

	box-sizing: border-box;
	background-color: #EFF7FD ;
	margin-right: 40rpx;
	text-align: center;
	font-size: 36rpx;
		
	}

	.container {
		display: flex;
		/* 横向排列 */
		flex-direction: row;
		/* 明确方向 */
	}

	.box1 {
		padding-top: 26rpx;
		margin: 18rpx 0 0 32rpx;
		width: 686rpx;
		height: 350rpx;
		background: linear-gradient(180deg, #C1E5FF 0%, #E7F5FF 92%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.data1 {
		margin: 0rpx 0 26rpx 28rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
	}

	.img1 {
		width: 32rpx;
		height: 32rpx;
	}

	.text1 {
		// padding: 19rpx 0 0 0;
		 margin-left: 20rpx;
		// height: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		
		 
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	/* pages/index/dht/dht.wxss */
	.box {



		.xh {
			flex: 1;
			max-width: 25%;
			min-width: 25%;

			.list-box {

				margin-top: 18rpx;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 134rpx;
				height: 160rpx;
				background: #EFF7FD;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				// margin-bottom: 30rpx;


				.text {
					font-size: 28rpx;
					margin-top: 4rpx;
					// font-size: 24rpx;
					font-family: PingFang SC;
					color: #333333;
				}

				.image {
					font-size: 28rpx;
					font-weight: 500;
					margin-top: 16rpx;
					height: 68rpx;
					width: 68rpx;
				}
			}
		}
	}


	.Cdata {
		display: flex;
	}

	.Cimg1 {
		width: 32rpx;
		height: 32rpx;
	
	}

	.Ctext1 {
		padding: 21rpx 0 0 0;
		width: 140rpx;
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.appoitnData {
		margin: 14rpx 0 0 32rpx;
		width: 686rpx;
		height: 840rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.afterApp {
		margin-left: 32rpx;
		padding-top: 20rpx;

		width: 112rpx;
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.flex1 {
		margin: 25rpx 0 0 0rpx;
	}

	.leftApp {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 384rpx;
		height: 68rpx;
		background: #F5F5F5;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

	}

	.rightApp {

		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 0 0 16rpx;
		width: 214rpx;
		height: 68rpx;
		background: #F4FAFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
</style>